<template>
  <div :class="isShowTop ? '' : 'frame-tops'" class="frame-top flex-between">
    <div v-show="isLeftNav" class="menu-left">
      <!-- <BasinChange style="position: absolute; left: 50px" /> -->
      <div class="el-dropdown">
        <div class="item" :class="{
          active: this.$route.path.indexOf('/IndexMain') !== -1,
        }" @click="onHeadMeun('/IndexMain')">
          概况
        </div>
      </div>
      <div class="el-dropdown">
        <div class="item" :class="{
          active:
            this.$route.path.indexOf(
              '/prediction/Measured'
            ) !== -1 ||  this.$route.path.indexOf('/prediction/ShortPro/index') !== -1,
        }" @click="onHeadMeun('/prediction/Measured')">
        预报
        </div>
      </div>
      <!-- <el-dropdown placement="bottom" @command="onHeadMeun">
        <div class="item" :class="{
          active: $route.path.indexOf('prediction') !== -1,
        }">
          预报
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="/prediction/Measured" :class="{
            active: this.$route.path.indexOf('/prediction/Measured') !== -1,
          }">
            降雨信息
          </el-dropdown-item>

          <el-dropdown-item command="/prediction/ShortPro/index" :class="{
            active:
              this.$route.path.indexOf('/prediction/ShortPro/index') !== -1,
          }">
            预报分析
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <div class="el-dropdown">
        <div class="item" :class="{
          active:
            this.$route.path.indexOf(
              '/earlyWarning/EarlyWarningInfo/index'
            ) !== -1,
        }" @click="onHeadMeun('/earlyWarning/EarlyWarningInfo/index')">
          预警
        </div>
      </div>
      <!-- <el-dropdown placement="bottom" @command="onHeadMeun">
        <div
          class="item"
          :class="{ active: $route.path.indexOf('earlyWarning') !== -1 }"
        >
          预警
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            command="/earlyWarning/EarlyWarningInfo/index"
            :class="{
              active:
                this.$route.path.indexOf(
                  '/earlyWarning/EarlyWarningInfo/index'
                ) !== -1,
            }"
          >
            预警信息
          </el-dropdown-item>
          <el-dropdown-item
            command="/earlyWarning/EarlyWarningStatistics"
            :class="{
              active:
                this.$route.path.indexOf(
                  '/earlyWarning/EarlyWarningStatistics'
                ) !== -1,
            }"
          >
            预警统计
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <div class="el-dropdown">
        <div class="item" :class="{ active: this.$route.path.indexOf('/Rehearsal') !== -1, }"
          @click="onHeadMeun('/Rehearsal')">
          预演
        </div>
      </div>
      <div class="el-dropdown">
        <div class="item" :class="{ active: this.$route.path.indexOf('/reserveplan/visualization') !== -1, }"
          @click="onHeadMeun('/reserveplan/visualization')">
          预案
        </div>
      </div>
      <!-- <el-dropdown placement="bottom" @command="onHeadMeun">
        <div class="item" :class="{ active: $route.path.indexOf('reserveplan') !== -1, }">
          预案
        </div>

        <el-dropdown-menu slot="dropdown">
           <el-dropdown-item
            command="/reserveplan/index"
            :class="{
              active: this.$route.path.indexOf('/reserveplan/index') !== -1,
            }"
          >
            预案管理
          </el-dropdown-item>
          
          <el-dropdown-item command="/reserveplan/visualization"
            :class="{ active: this.$route.path.indexOf('/reserveplan/visualization') !== -1, }">
            可视化预案
          </el-dropdown-item>
          <el-dropdown-item command="/reserveplan/previewPlan"
            :class="{ active: this.$route.path.indexOf('/reserveplan/previewPlan') !== -1, }">
            预演预案管理
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
    </div>
    <!-- <div class="projectName flex-center">
      小流域山洪"四预"平台
      //<img src="@/assets/nav/navTitle.png" alt="" srcset="">
    </div> -->
    <!-- <div class="menu-right flex-between">
      <div style="width: 25%" class="flex-center" />

      <div class="userInfo flex-center" style="position: absolute; right: 10px">
        <div class="flex-center">
          <span class="time" style="text-align: right">
            {{ $store.getters.realTime }}
          </span>
          <span class="userName">[ {{ userinfo }} ]</span>
          // <img src="@/assets/img/user.png" alt="" srcset="" /> 
          // <span class="userName">{{ userinfo }}</span> 
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
// import BasinChange from '../../map/cesium/BasinChange'
export default {
  name: "FrameTop",
  components: {
    // BasinChange
  },
  data() {
    return {
      userinfo: "用户名", // 用户信息
      isLeftNav: true,
      isShowTop: true,
    };
  },
  computed: {
    pathNav() {
      return this.$route.path;
    },
  },
  watch: {
    pathNav: {
      handler(newVal, oldVal) {
        if (newVal === "/index") {
          this.isLeftNav = false;
        } else {
          this.isLeftNav = true;
        }
      },
    },
  },
  created() {
    this.isShowTop = !this.$store.getters.pageType;
    this.getInfo();
    if (this.$route.path === "/index") {
      this.isLeftNav = false;
    } else {
      this.isLeftNav = true;
    }
  },
  methods: {
    async getInfo() {
      // const res = await getInfo()
      // this.userinfo = res.user.username
    },
    onHeadMeun(path) {
      // 判断是否当前
      this.$store.dispatch("closePop");
      if (this.$route.path.indexOf(path) !== -1) return;
      this.$router.push({ path: path });
    },
    toNewWindow(url) {
      window.open(url, "_blank");
    },
    LogOut() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          location.reload();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>



.frame-top {
  width: 100%;
  height: 90px;
  user-select: none;
  position: absolute;
  top: 0;
  left: 0;
  //background: url("~@/assets/newimg/top_body_line.png") no-repeat top center;
  background-size: 100% 100%;
  z-index: 1;

  // ,linear-gradient(#000, #fff0);
  .projectName {
    position: absolute;
    width: 50%;
    left: 25%;
    pointer-events: none;
    letter-spacing: 4px;
    font-size: 42px;
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-family: "MSTIFFHEIPRC";
    height: 90px;
    text-shadow: 0px 4px 8px rgba(2, 27, 64, 0.85);

    .logo {
      width: 32px;
      height: 32px;
      margin-right: 14px;
    }
  }

  .menu-left {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;

    .el-dropdown {
      background: url(../../assets/nav/nav.png) no-repeat  center;
      background-size: 85% 72%;
      margin-left: 10px;
      .item{
        padding: 24px;
        line-height: 4px;
      }
      .active {
        background: url(../../assets/nav/navActive.gif) no-repeat  center ; 
        background-size: 100% 100%;
      }
    }
  }

  .item {
    display: block;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
    //width: 110px;
    //height: 38px;
    width: 139px;
    height: 47px;
    line-height: 38px;
    text-align: center;
    font-family: 'Rzzy'; /* 使用自定义字体 */
    font-size: 20px;
    font-style: italic;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.53);
    opacity: 0.8;
  }

  .active {
    color: #ffffff;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.53);
    opacity: 1;
  }

  .menu-right {
    display: flex;
    align-items: center;
    width: 50%;
    float: right;
    padding: 20px 150px 0 0px;
    justify-content: right;

    .time {
      display: block;
      font-family: "MSTIFFHEIPRC";
      font-size: 18px;
      // mask-image:gradient(linear, 0 0, 0 bottom, from(#fff), to(#729EC9));
      background-image: linear-gradient(#eff6ff, #729ec9);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .sys_child {
      width: 21px;
      height: 21px;
      cursor: pointer;
    }

    .userInfo {
      padding: 0.2% 3% 0 4%;
      cursor: pointer;
      height: 38px;
      background: url(../../assets/newimg/userBg.png) no-repeat bottom center;
      background-size: 100% 100%;
      text-align: center;
      text-indent: 10px;

      img {
        width: 20px;
        height: 20px;
      }

      .userName {
        color: #2fffff;
        padding: 0 20px 0 10px;
      }
    }
  }
}

.frame-tops {
  width: 50%;
  height: 60px;
  user-select: none;
  position: absolute;
  top: 0;
  left: 25%;
  background: none;

  .menu-left {
    width: 100%;
    justify-content: center;
    padding: 0px;
    margin-top: 0px;
  }

  .projectName {
    display: none;
  }

  .menu-right {
    display: none;
  }

  .item {
    height: 36px;
    line-height: 36px;
    font-size: 18px;
  }
}
</style>
